{extend name="template/base" /}
{block name="content"}
<!--<link href="__LIB__/select2-4.0.3/dist/css/select2.min.css" rel="stylesheet" />-->
<div class="page-container">
    <form class="mb-20" method="get" action="{:\\think\\Url::build($Request.action)}">
        <input type="text" class="input-text" style="width:250px;margin-bottom: 5px" placeholder="司机类型名称" name="name" value="{$Request.param.name}" >
        <div style="width:250px;display: inline-block;" class="input-text" >
            <select name="from" class="select" style="border: solid 1px #ffffff;" datatype="*" nullmsg="">
                {if $Request.param.from == ''}
                    <option value="">请选择司机类型所属</option>
                    <option value="0">外签司机</option>
                    <option value="1">公司司机</option>
                {else/}
                    {if $Request.param.from == 0}
                        <option value="">请选择司机类型所属</option>
                        <option value="0" selected>外签司机</option>
                        <option value="1">公司司机</option>
                    {elseif $Request.param.from == 1/}
                        <option value="">请选择司机类型所属</option>
                        <option value="0">外签司机</option>
                        <option value="1" selected>公司司机</option>
                    {/if}
                {/if}
            </select>
        </div>
        <button type="submit" style="margin-bottom: 6px" class="btn btn-success"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
    </form>
    <!--<div class="cl pd-5 bg-1 bk-gray">-->
        <!--<span class="l">-->
            <!--<a href="javascript:;" onclick="del_all()" class="btn btn-danger radius mr-5"><i class="Hui-iconfont"></i> 删除</a>-->
        <!--</span>-->
    <!--</div>-->
    <div class="cl pd-5 bg-1 bk-gray">
        <form class="form form-horizontal" id="add1" method="post" onsubmit="return false">
            <label><span class="c-red">*</span>司机类型名称：</label>
            &nbsp;&nbsp;<input type="text" class="input-text" style="width:200px;vertical-align: top;"  placeholder="司机类型名称" name="name" value="{$vo.name ?? ''}"  datatype="*" nullmsg="司机类型名称不能为空" errormsg="司机类型名称格式错误">

            <label><span class="c-red">*</span>司机类型所属：</label>
            <div style="width:250px;display: inline-block;background-color: #ffffff" class="input-text" >
                <select name="from" class="select" style="border: solid 1px #ffffff;" id="from" datatype="*" nullmsg="">
                    <option value="">请选择司机类型所属</option>
                    <option value="0">外签司机</option>
                    <option value="1">公司司机</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary radius" style="margin-bottom: 6px" onclick="addType()">&nbsp;&nbsp;添加&nbsp;&nbsp;</button>
            <span class="r pt-5 pr-5">
            共有数据 ：<strong>{$count ?? '0'}</strong> 条
            </span>
        </form>
    </div>
    <table class="table table-border table-bordered table-hover table-bg mt-20">
        <thead>
        <tr class="text-c">
            <!--<th width="25"><input type="checkbox"></th>-->
            <th width="">ID</th>
            <th width="">司机类型名称</th>
            <th width="">司机类型所属</th>
            <th width="">创建时间</th>
            <th width="70">操作</th>
        </tr>
        </thead>
        <tbody>
        {volist name='list' id='vo'}
            <tr class="text-c">
                <!--<td><input type="checkbox" name="id[]" value="{$vo.id}"></td>-->
                <td>{$vo.id}</td>
                <td>
                    <span id="name_c{$vo.id}">
                       {$vo.name}
                    </span>
                    <span>
                        <input type="text" class="input-text" id="name{$vo.id}" name="name" value="{$vo.name}" style="width: 65%;text-align: center;display: none;">
                    </span>
                </td>
                <td>
                    <div id="driver_from_c{$vo.id}">
                        {if $vo.from == 0}
                        <span>外签司机</span>
                        {else/}
                        <span>公司司机</span>
                        {/if}
                    </div>
                    <span>
                        <div id="driver_from{$vo.id}" style="width:250px;display: none;background-color: #ffffff" class="input-text" >
                            <select name="from" id="driver_from_val{$vo.id}" class="select" style="border: solid 1px #ffffff;" datatype="*" nullmsg="">
                                {if $vo.from == 0}
                                <option value="">请选择司机类型所属</option>
                                 <option value="0" selected>外签司机</option>
                                 <option value="1">公司司机</option>
                                {else/}
                                <option value="">请选择司机类型所属</option>
                                 <option value="0">外签司机</option>
                                 <option value="1" selected>公司司机</option>
                                {/if}
                            </select>
                        </div>
                    </span>
                </td>
                <td>
                    <span>
                       {$vo.create_time|date="Y-m-d H:i:s",###}
                    </span>
                </td>
                <td class="f-14">
                    <a class="btn btn-primary radius mr-5" href="javascript:;" id="cancel{$vo.id}" onclick="editData(this,'{$vo.id}')"><i class="Hui-iconfont">&#xe647;</i>编辑</a>
                    <span id="edit{$vo.id}" style="display: none;">
                        <a class="btn btn-danger radius mr-5" href="javascript:;" onclick="cancelEdit(this,'{$vo.id}')"><i class="Hui-iconfont">&#xe6a6;</i>取消</a>
                        <a class="btn btn-primary radius mr-5" href="javascript:;" onclick="saveData(this,'{$vo.id}')"><i class="Hui-iconfont">&#xe600;</i>提交</a>
                    </span>
                    <a class="btn btn-danger radius mr-5" href="javascript:;" onclick="delData('{$vo.id}')"><i class="Hui-iconfont">&#xe6a6;</i>删除</a>
                </td>
            </tr>
        {/volist}
        </tbody>
    </table>
    <div class="page-bootstrap">{$page ?? ''}</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/My97DatePicker/WdatePicker.js"></script>

<script>
    function addType() {
        console.log('你提交了', $('#add1').serializeArray())
        var data = $('#add1').serialize();
        $.ajax({
            type: 'POST',
            url: '/admin/driver/add_driver_type',
            data: data,
            success: function (ret) {
                if (ret.code == 1){
                    layer.msg(ret.msg);
                } else{
                    layer.msg(ret.msg);
                    location.reload();
                }
            }
        });
    }
</script>

<script>
    // 显示编辑输入框
    function editData(obj, id) {
        // console.log('当前对象', obj);
        // 显示输入框和隐藏文字
        var wen = "#name_c" + id;
        var shu = "#name" + id;
        $(wen).css('display','none');
        $(shu).css('display','inline');
        // 隐藏编辑按钮，显示提交和取消按钮
        var edit = "#edit" + id;
        $(edit).css('display','inline');
        $(obj).css('display','none');
        var driver_from = "#driver_from" + id;
        var driver_from_c = "#driver_from_c" + id;
        $(driver_from).css('display','inline-block');
        $(driver_from_c).css('display','none');
    }

    // 取消编辑
    function cancelEdit(obj, id) {
        // 恢复原来的样子,隐藏输入框和显示数据
        var wen = "#name_c" + id;
        var shu = "#name" + id;
        $(wen).css('display','inline');
        $(shu).css('display','none');
        // 显示编辑按钮，隐藏提交和取消按钮
        var edit = "#edit" + id;
        var cancel = "#cancel" + id;
        $(edit).css('display','none');
        $(cancel).css('display','inline');
        var driver_from = "#driver_from" + id;
        var driver_from_c = "#driver_from_c" + id;
        $(driver_from).css('display','none');
        $(driver_from_c).css('display','inline-block');
    }
    // 保存数据
    function saveData(obj, id) {
        // 获取当前输入框
        var name = "#name" + id;
        var name_val = $(name).val();

        var from = "#driver_from_val" + id;
        var from_val = $(from).val();

        if (!name_val){
            layer.msg('司机类型名称不能为空');
            return false;
        }
        $.ajax({
            type: 'post',
            url: '/admin/driver/edit_driver_type',
            data: {id:id, name:name_val,from:from_val},
            success: function (ret) {
                if (ret.code == 1){
                    layer.msg(ret.msg)
                }else{
                    layer.msg(ret.msg);
                    location.reload();
                }
            }
        });
    }
    // 删除
    function delData(id) {
        $.ajax({
            type: 'post',
            url: '/admin/driver/del_driver_type',
            data: {id:id},
            success: function (ret) {
                if (ret.code == 1){
                    layer.msg(ret.msg, {
                        time: 2000, //2s后自动关闭
                    }, function () {
                        location.reload()
                    });
                }else{
                    layer.msg(ret.msg, {
                        time: 2000, //2s后自动关闭
                    }, function () {
                        location.reload()
                    });
                }
            }
        });
    }
</script>
{/block}

